import React, {Component} from 'react';
import {StyleSheet, View, Image, Text, TouchableWithoutFeedback, Linking} from 'react-native';

export default class extends Component {
    //初始值
    state = {
        navList1: [
            {
                title: '收益',
                url: 'profit',
                img: require('./img/icon_profit.png')
            },
            {
                title: '订单',
                url: 'orderList',
                img: require('./img/icon_order.png')
            },
            {
                title: '粉丝',
                url: 'fans',
                img: require('./img/icon_fans.png')
            },
            {
                title: '邀请',
                url: 'invite',
                img: require('./img/icon_invite.png')
            }
        ],
        navList2: [
            {
                title: '新手攻略',
                url: 'strategy',
                img: require('./img/icon_strategy.png')
            },
            {
                title: '我的收藏',
                url: 'collection',
                img: require('./img/icon_collection.png')
            },
            {
                title: '常见问题',
                url: 'question',
                img: require('./img/icon_question.png')
            },
            {
                title: '联系客服',
                url: 'customService',
                img: require('./img/icon_cc.png')
            }
        ]
    };
    createNav = (list) => {
        const {navigation} = this.props;
        return list.map(item =>
            <TouchableWithoutFeedback
                key={item.title}
                onPress={() => {
                    if (item.url === 'cc') {
                        Linking.openURL('tel:10086');
                    } else {
                        navigation.navigate(item.url);
                    }
                }}>
                <View style={styles.item}>
                    <Image source={item.img} style={styles.img}/>
                    <Text style={styles.title}>{item.title}</Text>
                </View>
            </TouchableWithoutFeedback>
        )
    };

    render() {
        const {navList1, navList2} = this.state;
        const {isLogin} = this.props;
        return (
            <View>
                {
                    isLogin ?
                        <View style={styles.container}>
                            {this.createNav(navList1)}
                        </View>
                        : null
                }
                <View style={styles.container}>
                    {this.createNav(navList2)}
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height: 82,
        width: '100%',
        marginTop: 9,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff'
    },
    item: {
        flex: 1,
        height: 52,
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    img: {
        width: 30,
        height: 30,
        marginBottom: 2
    },
    title: {
        fontSize: 12,
        color: '#4c4c4c'
    }
});
